<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>

</style>

<body>

    <!-- 
     
    -->

    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>


        <!-- 静态列表 -->
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ul>

        <!-- 动态列表 -->
        <ul>
            <!-- 
                1.v-for要写在循环项上
                2.v-for的语法规则
                    v-for="变量名 in/of 数组"
                    变量名 代表了 数组中的每一个元素
            -->
            <li v-for="item in names">
                {{item}}
            </li>
        </ul>

        <ul>
            <!-- 
               获取下标方式
               也可以使用of遍历
            -->
            <li v-for="(item,index) of names">
                {{item}}-{{index}}
            </li>
        </ul>
        <ul>
            <!-- 循环对象 -->
            <li v-for="(vip,index) in vips">
                会员编号：{{vip.id}}，姓名：{{vip.name}}，年龄：{{vip.age}}
            </li>
        </ul>
        <hr />
        <!-- 遍历对象属性 -->
        <ul>
            <li v-for="(value,propertyName) of users">
                {{propertyName}}-{{value}}
            </li>
        </ul>
        <hr />
        <!-- 遍历字符串 -->
        <ul>
            <li v-for="(char1,index) of str">
                {{index}}-{{char1}}
            </li>
        </ul>
        <hr />
        <!-- 遍历指定次数 -->
        <ul>
            <li v-for="(num,index) of 10">
                {{index}}-{{num}}
            </li>
        </ul>
    </div>

    <script>

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '列表渲染',
                names: ['jack', 'lucy', 'james'],
                vips: [
                    { id: 1, name: '刘备', age: 10 },
                    { id: 2, name: '关羽', age: 8 },
                    { id: 3, name: '张飞', age: 5 },
                ],
                users: { id: 1, name: '张无忌', power: "九阳神功" },
                str: '起飞啦。。。'
            }
        })
    </script>


</body>


</html>